<template>
  <div>
    <!-- 返回按钮 -->
    <van-nav-bar title="参考书" left-text="返回" left-arrow @click-left="goToHome"/>
    <van-tabs v-model:active="active" :swipeable="true">
      <van-tab title="建筑史" name="chinese-building-history">
        <div class="book-list">
          <div class="book-item" v-for="(book, index) in books.chineseBuildingHistory" :key="index">
            <img v-if="book.image" :src="book.image" alt="Book Cover" />
            <p>{{ book.bookName }}</p> <!-- 修改为bookName以匹配后端数据字段 -->
            <p>作者: {{ book.author }}</p> <!-- 新增，展示作者 -->
            <p>出版社: {{ book.publisher }}</p> <!-- 新增，展示出版社 -->
            <a :href="book.buyLink" target="_blank">购买</a> <!-- 将按钮改为链接，并添加target="_blank"以新窗口打开 -->
          </div>
        </div>
      </van-tab>
      <van-tab title="技术" name="technology">
        <div class="book-list">
          <div class="book-item" v-for="(book, index) in books.technology" :key="index">
            <img v-if="book.image" :src="book.image" alt="Book Cover" />
            <p>{{ book.bookName }}</p> <!-- 修改为bookName以匹配后端数据字段 -->
            <p>作者: {{ book.author }}</p> <!-- 新增，展示作者 -->
            <p>出版社: {{ book.publisher }}</p> <!-- 新增，展示出版社 -->
            <a :href="book.buyLink" target="_blank">购买</a> <!-- 将按钮改为链接，并添加target="_blank"以新窗口打开 -->
          </div>
        </div>
      </van-tab>
      <van-tab title="快题" name="fast-topic">
        <div class="book-list">
          <div class="book-item" v-for="(book, index) in books.fastTopic" :key="index">
            <img v-if="book.image" :src="book.image" alt="Book Cover" />
            <p>{{ book.bookName }}</p> <!-- 修改为bookName以匹配后端数据字段 -->
            <p>作者: {{ book.author }}</p> <!-- 新增，展示作者 -->
            <p>出版社: {{ book.publisher }}</p> <!-- 新增，展示出版社 -->
            <a :href="book.buyLink" target="_blank">购买</a> <!-- 将按钮改为链接，并添加target="_blank"以新窗口打开 -->
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-back-top right="15vw" bottom="10vh" />

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {showToast} from "vant";
import {get} from "../../util/request";
import { useRouter } from "vue-router"; // 添加这一行来引入useRouter

const router = useRouter(); // 在setup里声明并初始化router实例

const active = ref('chinese-building-history');
const books = ref({
  chineseBuildingHistory: [],
  technology: [],
  fastTopic: [],
});

onMounted(async () => {
    get('home/reference/getAllReferenceBooks').then( r=>{
      if (r.code == 0){ // 获取成功
        books.value.chineseBuildingHistory = r.data['建筑史'] || [];
        books.value.technology = r.data['技术'] || [];
        books.value.fastTopic = r.data['快题'] || [];
      }else {
        showToast("获取书籍失败")
        // 加载状态结束
      }
    }).catch(function (){
      alert("全部异常")
    })
  // 更新 books 对象中的各个属
})

const goToHome = () => {
  router.push({ name: 'home' }); // 导航到名为'Home'的路由
};
const buyBook = (book) => {
  alert(`购买 ${book.title}`);
};
</script>

<style scoped>
.book-list {
  display: flex;
  flex-direction: column;
}

.book-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    margin-right: 16px;
  }

  p {
    font-size: 16px;
    line-height: 20px;
  }

  button {
    margin-left: auto;
  }
}
</style>
